<template>
   <div>
     <!--条形码
      format: "CODE39",//选择要使用的条形码类型
     width:3,//设置条之间的宽度
     height:100,//高度
     displayValue:true,//是否在条形码下方显示文字
     text:"456",//覆盖显示的文本
     fontOptions:"bold italic",//使文字加粗体或变斜体
     font:"fantasy",//设置文本的字体
     textAlign:"left",//设置文本的水平对齐方式
     textPosition:"top",//设置文本的垂直位置
     textMargin:3,//设置条形码和文本之间的间距
     fontSize:15,//设置文本的大小
     background:"#eee",//设置条形码的背景
     lineColor:"#2196f3",//设置条和文本的颜色。
     margin:15//设置条形码周围的空白边距
     -->
     <VueBarcode v-if="propType == 'barcode'" :value="propValue" :height="height" width="1" :fontSize="12" :displayValue="false" :textMargin="0" :margin="0"

     ></VueBarcode>

     <!--二维码-->
     <img  id="qrCode" :src="codeSrc" v-else />
     <div style="font-size: 14px ;    font-weight: normal;    padding-top: 3px;" v-if=" displayValue">{{propValue}}</div>
     <div style="font-size: 14px ;    font-weight: normal;    padding-top: 3px;" v-if=" displayText">{{propText}}</div>
   </div>
</template>

<script>
/*eslint-disable*/
/*条形码、二维码*/
import VueBarcode from 'vue-barcode'
import JRCode from 'jr-qrcode'

export default {
  name: 'fortenCode',
  /**
   * @param  propType  类型，barcode,qrcode
   * @param  propValue 值
   * @param  propText  显示文字
   * @param  propHeight 条形码或者二维码显示高度
   * @param  propWidth 二维码显示宽度
   * @param  propDisplayValue 二维码或者条形码下方是否显示文字
   */
  props: ['propType','propValue','propText', 'propHeight','propWidth', 'propDisplayValue', 'propDisplayText'],
  components: {VueBarcode, QRCode},
  data() {
    return {
      codeSrc:'',
      height: 40,
      width:100,
      displayValue: false,
      displayText: false,
    }
  },

  methods: {
    //接受属性
    getProps(){
      if(this.propHeight) this.height = this.propHeight
      if(this.propWidth) this.width = this.propWidth
      if(this.propDisplayValue != undefined) this.displayValue = this.propDisplayValue
      if(this.propDisplayText != undefined) this.displayText = this.propDisplayText
    },

    //加载
    initCode(){
      this.getProps()
      //二维码
      if(this.propType == 'qrcode') {
        this.codeSrc = JRCode.getQrBase64(this.propValue, {
          padding       : 0,   // 二维码四边空白（默认为10px）
          width         : this.width,  // 二维码图片宽度（默认为256px）
          height        : this.height,  // 二维码图片高度（默认为256px）
          correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
          reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
          background    : "#ffffff",    // 二维码背景颜色（默认白色）
          foreground    : "#000000"     // 二维码颜色（默认黑色）
        })
      }
    }
  },

  watch:{
    //参数变化后，进行初始化
    propValue:{
      handler(newValue, oldValue) {
        if(this.propValue) this.initCode()
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
